﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>白凉心哦</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            border: 0;
            font-family: 'Nunito', sans-serif;
        }


        canvas {
            margin: 0;
            padding: 0;
            display: block;
            /*  ˉ\_(ツ)_/ˉ  */
            touch-action: none;
        }
    </style>
    <link rel="stylesheet" href="live2d/css/live2d.css" />
</head>

<body>

    <div id="container">
        <div id="dock">
            <ul style="padding-left: 0px;">
                <li>
                    <span>时间煮雨</span>
                    <a href="sjzy/index.html"><img src="images/9.png"></a>
                </li>
                <li>
                    <span>烟花</span>
                    <a href="yh/index.html"><img src="images/8.png"></a>
                </li>
                <li>
                    <span>献青春</span>
                    <a href="nb/nb.html"><img src="images/7.png"></a>
                </li>
                <li>
                    <span>贪吃蛇</span>
                    <a href="tcs/index.html"><img src="images/2.png"></a>
                </li>
                <li>
                    <span>坏掉的象棋</span>
                    <a href="xq/demo.html"><img src="images/3.png"></a>
                </li>
                <li>
                    <span>YYDS</span>
                    <a href="ys/ys.html"><img src="images/4.png"></a>
            
                </li>

            </ul>
        </div>
    </div>

    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>


    <canvas></canvas>
    <script>
        function aa() {
            if (prompt("原神玩吗?") == "玩") {
                window.location = "ys/ys.html"
            } else {
                alert("走你！")
            }
        }
    </script>
    <script>
        var canvas = document.querySelector('canvas');
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        c = canvas.getContext('2d');

        window.addEventListener('resize', function () {
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;

            initCanvas();
        })

        var mouse = {
            x: undefined,
            y: undefined
        }
        window.addEventListener('mousemove',
            function (event) {
                mouse.x = event.x;
                mouse.y = event.y;
                drawCircles();
            }
        )
        window.addEventListener("touchmove",
            function (event) {
                let touch = event.touches[0];
                mouse.x = touch.clientX;
                mouse.y = touch.clientY;
                drawCircles();
            }
        )

        function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.minRadius = radius;
            this.vx = vx;
            this.vy = vy;
            this.birth = birth;
            this.life = life;
            this.opacity = opacity;

            this.draw = function () {
                c.beginPath();
                c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
                c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
                c.fill();
            }

            this.update = function () {
                if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
                    this.vx = -this.vx;
                }

                if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
                    this.vy = -this.vy;
                }

                this.x += this.vx;
                this.y += this.vy;

                this.opacity = 1 - (((frame - this.birth) * 1) / this.life);

                if (frame > this.birth + this.life) {
                    for (let i = 0; i < circleArray.length; i++) {
                        if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
                            circleArray.splice(i, 1);
                            break;
                        }
                    }
                } else {
                    this.draw();
                }
            }

        }

        var circleArray = [];

        function initCanvas() {
            circleArray = [];
        }

        var colorArray = [
            '255,105,180',
            '255,0,255',
            '255,182,193'
        ]

        function drawCircles() {
            for (let i = 0; i < 6; i++) {
                let radius = Math.floor(Math.random() * 4) + 2;
                let vx = (Math.random() * 2) - 1;
                let vy = (Math.random() * 2) - 1;
                let spawnFrame = frame;
                let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
                let life = 100;
                circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));

            }
        }

        var frame = 0;
        function animate() {
            requestAnimationFrame(animate);
            frame += 1;
            c.clearRect(0, 0, innerWidth, innerHeight);
            for (let i = 0; i < circleArray.length; i++) {
                circleArray[i].update();
            }

        }

        initCanvas();
        animate();

        // This is just for demo purposes :
        for (let i = 1; i < 110; i++) {
            (function (index) {
                setTimeout(function () {
                    mouse.x = 100 + i * 10;
                    mouse.y = 100;
                    drawCircles();
                }, i * 10);
            })(i);
        }
    </script>
    <div id="sendmessage">
        <input id="sendinput" placeholder="随便发点什么吧！" />
        <input type="submit" id="sendbtn" onmouseover="this.style.backgroundPosition='left -51px'"
            onmouseout="this.style.backgroundPosition='left top'" value="发送" style="background-position: left top;">
    </div>
    <div id="live2d-widget"><canvas id="live2dcanvas" width="300" height="600"
            style="position: fixed; opacity: 0.7; right: 0px; bottom: -20px; z-index: 99999; pointer-events: none; border:  rgb(204, 204, 204);"></canvas>
    </div>
    <script src="mn/L2Dwidget.min.js"></script>
    <script type="text/javascript">
        L2Dwidget.init();
    </script>



    <div id="landlord" style="left: 0;bottom: 200px;">
        <div class="message" style="opacity:0"></div>
        <div class="sendmessage">
            <input class="sendinput" placeholder="随便发点什么吧！" />
            <input type="submit" class="sendbtn" onmouseover="this.style.backgroundPosition='left -51px'"
                onmouseout="this.style.backgroundPosition='left top'" value="发送" style="background-position: left top;">
        </div>

        <canvas id="live2d" style="opacity: 0.7;width: 380px;height: 450px;" width="280" height="250"
            class="live2d"></canvas>
        <div class="lt-button">开始聊天</div>
        <div class="hide-button">隐藏</div>
    </div>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
        var message_Path = 'live2d/'
        var home_Path = 'https://haremu.com/'
    </script>
    <script type="text/javascript" src="live2d/js/live2d.js"></script>
    <script type="text/javascript" src="live2d/js/message.js"></script>
    <script type="text/javascript">
        loadlive2d("live2d", "live2d/model/tia/model.json");
    </script>
</body>

</html>